<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
</head>

<body>
    <form action="#" method="post">
        <div>
            用户名:<input type="text" name="username" autofocus>
            <span class="msgError"></span>
        </div>
        <div>
            密码:<input type="password" name="password">
            <span class="msgError"></span>
        </div>

        手机号:<input type="tel" name="phone"> <br />
        邮箱:<input type="email" name="email"> <br />
        <input type="submit" value="提交">

    </form>

    <script>
        let username = document.querySelector("[name='username']")
        let password = document.querySelector("[name='password']")
        let phone = document.querySelector("[name='phone']")
        let email = document.querySelector("[name='email']")
        let msgBoxes = document.querySelectorAll(".msgError")
        username.onblur = () => {
            let val = username.value
            // TODO 判断是否合法
            // if (val < 6 || val > 11) {
            //     let msg = "用户名长度不合理！"
            //     username.style.border = "2px solid red"
            //     let msgBox = document.createElement("span")
            //     msgBox.innerText = msg
            //     msgBox.style.color = "red";
            //     username.parentNode.appendChild(msgBox)
            // }
            // 不能以数字开头，不能出现中文
            // let reg = /正则表达式/ 正则表达式不需要使用双引号
            let reg = /^[a-zA-Z][a-zA-Z0-9_]{5,10}$/
            // let re = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,10}$")
            // test(检验的内容) true/false
            if (!reg.test(val)) {
                let msg = "用户名只能字母开头，允许6-11字节，允许字母数字下划线！"
                username.style.outline = "2px solid red"
                // let msgBox = document.createElement("span")
                errorMsg(msg, msgBoxes[0])
            } else {
                console.log("通过");
                username.style.border = "2px solid "
            }
        }
        // function fun() {}
        // let fun = () => {}
        password.onblur = () => {
            let val = password.value
            console.log(val);
            let reg = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,16}$/
            if (!reg.test(val)) {
                console.log("校验失败");
                let msg = "必须包含大小写字母和数字的组合，不能使用特殊字符，长度在 8-16 之间"
                errorMsg(msg, msgBoxes[1])
            }
        }

        let errorMsg = (msg, msgBox) => {
            msgBox.innerText = msg
            msgBox.style.color = "red";
        }



    </script>
</body>

</html>